<style lang="scss" scoped>
.classify_detail{
    padding-bottom: 50px;
}
h3{
    color: #333;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
}
.box{
    width:1200px;
    margin:20px auto;
    border-radius:4px 4px 0px 0px;
    overflow: hidden;
}
.breadcrumb{
    color: #333;
    background: #fff;
    border-bottom: 1px solid #eee;
    text-indent: 0;
    padding: 10px 0;
    a{
        color: #3684F8;
    }
}
.box1{
    border:1px solid #eee;
    color: #333;
    .title{
        background: #2D84FF;
        color: #fff;
        padding:10px 0;
        position: relative;
        padding-left: 100px;
        border-bottom: 1px solid #eee;
        .flag{
            position:absolute;
            top: 20px;
            margin:auto;
            left: 30px;
        }
        h4{
            padding:0;
            margin:0;
            line-height: 40px;
            font-size: 24px;
        }
        p{
            font-size: 12px;
        }
    }
    .content{
        padding:0 100px 20px;
        h6{
            font-size: 18px;
            line-height: 40px;
        }
        p{
            line-height: 26px;
            color: #666;
        }
    }
}
.box2{
    &::before{
        content: "群组信息";
        background: #3D85FD;
        color: #fff;
        display: block;
        width:100%;
        line-height: 30px;
        text-indent: 30px;
    }
    .content{
        border:1px solid #eee;
        border-top: 0;
        padding:10px 30px;
        display: flex;
        font-size: 16px;
        justify-content:space-between;
        &>ul{
            width:50%;
            li{
                cursor: pointer;
                font-weight: bold;
                line-height: 50px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            li.active{
                color: #2D84FF
            }
        }
        &>div{
            width:50%;
            padding-left: 10px;
            border-left: 1px solid #eee;
            h5{
                margin:0;
                line-height: 50px;
                font-size: 16px;
                color: #3D85FD;
            }
            p{
                font-size: 14px;
                color: #666;
                line-height: 30px;
            }
        }
    }
}

</style>
<template>
    <div class="classify_detail">
        <trademark-top />
        <h3>商标查询分类</h3>
        <p class="breadcrumb box">
            您当前的位置：<router-link to="trademark">商标分类</router-link>
            &gt; 第{{info.num}}类
        </p>
        <div class="box box1">
            <div class="title">
                <img class="flag" src="@/assets/trademark_flag.svg" >
                <h4>{{`第${info.num}类 ${info.name}`}}</h4>
                <p>{{info.desp}}</p>
            </div>
            <div class="content">
                <h6><b>【注释】</b></h6>
                <p>{{info.remark}}</p>
            </div>
        </div>
        <div class="box box2">
            <div class="content">
                <ul>
                    <li @click="getContent(index)" :class="{active:index===current}" :title="val.name" v-for="(val,index) in list" :key="val.id">
                        <span v-if="val.code">{{`【${val.code}】- `}}</span>
                        {{val.name}}
                    </li>
                </ul>
                <div>
                    <h5>{{sub_title}}</h5>
                    <p>{{remark}}</p>
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import ("@/assets/init.scss")
import trademarkTop      from "@/components/trademark_top"
import Footer      from "@/components/footer"
import {trademark_detail} from "@/assets/api"
export default {
    data(){
        return {
            list:[],
            info:{},
            current:0,
            remark:'',
            sub_title:''
        }
    },
    components:{
        trademarkTop,
        Footer
    },
    methods:{
        getContent(index){
            const data=this.list[index]
            this.current=index
            this.sub_title=`【${data.code}】- ${data.name}`
            trademark_detail({code:data.code})
            .then(res=>{
                if(res){
                    this.remark=res.data.list.map(el=>el.name+el.code).join('，')
                }
            })
        }
    },
    created(){
        const toChinesNum=function(num){
            let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零"
            let unit = ["", "十", "百", "千", "万"];
            num = parseInt(num);
            let getWan = (temp) => {
            let strArr = temp.toString().split("").reverse();
            let newNum = "";
            for (var i = 0; i < strArr.length; i++) {
                newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
                }
                return newNum;
            }
            let overWan = Math.floor(num / 10000);
            let noWan = num % 10000;
            if (noWan.toString().length < 4) noWan = "0" + noWan;
            return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
        }
        let code=this.$route.query.code.length>2?this.$route.query.code.substr(0,2):this.$route.query.code
        if(code.length===1){
            code= (Array(2).join(0) + code).slice(-2);
        }
        trademark_detail({code})
        .then(res=>{
            if(res){
                this.info=res.data.info
                this.info.num=toChinesNum(this.info.code)
                this.list=res.data.list
                let num=0
                if(code.length>2){
                    num=code.substr(2,2)
                    num--
                } 
                this.getContent(num)
            }
        })
        
    }
}
</script>